import React, {PureComponent} from 'react';
import {StyleSheet, View, Image} from 'react-native';
import Swiper from 'react-native-swiper';
import utils from '../../../common/utils';

export default class extends PureComponent {
    render() {
        let {imgList = [], mainPic} = this.props;
        imgList = imgList.length ? imgList : [mainPic];
        return (
            <View style={styles.container}>
                {
                    imgList.length > 0 && imgList[0] ?
                        <Swiper style={styles.wrapper} showsPagination={!!imgList.length} showsButtons={false}
                                autoplay={true}
                                paginationStyle={styles.paginationStyle}
                                activeDotColor="red">
                            {
                                imgList.map((item, index) =>
                                    <Image
                                        key={index}
                                        source={{uri: item}}
                                        style={styles.image}/>
                                )
                            }
                        </Swiper> : null
                }
            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        height: utils.getScreen().width
    },
    paginationStyle: {
        bottom: 5
    },
    image: {
        flex: 1
    }
});
